<template>
	<view>
		<view class="Father_input">
			<text class="iconfont icon-sousuo"></text>
			<input type="text" class="search" placeholder="搜索关键字"/>
		</view>
		<view class="Father_plot">
			<view class="plot house_type">
				<view class="plot_left">
					<text class="plot_left_text">
						全部
					</text>
				</view>
				<view class="plot_right">
					<text class="plot_right_text">
						系统消息
					</text>
				</view>
			</view>
		</view>
		<view class="Father_letter">
			<view class="letter">
				<view class="letter_son">
					<image src="https://s2.loli.net/2024/11/20/qJ1w4soAikYnTCB.jpg" mode=""></image>
				</view>
				<view class="letter_sonn">
					<view class="sonn_top">
						高玲
					</view>
					<view class="sonn_buttom">
						收到
					</view>
				</view>
				<view class="letter_sonnn">
					上午8:18
				</view>
			</view>
			<view class="letter">
				<view class="letter_son">
					<image src="https://s2.loli.net/2024/11/20/4VNitIlXEwqn3BW.jpg" mode=""></image>
				</view>
				<view class="letter_sonn">
					<view class="sonn_top">
						张豪
					</view>
					<view class="sonn_buttom">
						家里暖气不热了，能派人过来修吗
					</view>
				</view>
				<view class="letter_sonnn">
					11月8日
				</view>
			</view>
			<view class="letter">
				<view class="letter_son">
					<image src="https://s2.loli.net/2024/11/20/4VNitIlXEwqn3BW.jpg" mode=""></image>
				</view>
				<view class="letter_sonn">
					<view class="sonn_top">
						张豪
					</view>
					<view class="sonn_buttom">
						家里暖气不热了，能派人过来修吗
					</view>
				</view>
				<view class="letter_sonnn">
					11月8日
				</view>
			</view>
			<view class="letter">
				<view class="letter_son">
					<image src="https://s2.loli.net/2024/11/20/4VNitIlXEwqn3BW.jpg" mode=""></image>
				</view>
				<view class="letter_sonn">
					<view class="sonn_top">
						张豪
					</view>
					<view class="sonn_buttom">
						家里暖气不热了，能派人过来修吗
					</view>
				</view>
				<view class="letter_sonnn">
					11月8日
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="less">
page{
	overflow: hidden;
}
.Father_input{
	margin-top: 44rpx;
	padding: 0 45rpx;
	display: flex;
	position: relative;
}
.search{
	width: 100%;
	height: 66rpx;
	border-radius: 33rpx;
	padding-left: 78rpx;
	background-color: #f4f6f6;
}
.icon-sousuo{
	position: absolute;
	top: 20rpx;
	left: 75rpx;
}
.Father_plot{
	margin-top: 34rpx;
	padding: 0 85rpx 0 45rpx;
}
.plot{
	width: 100%;
	height: 100rpx;
	line-height: 100rpx;
	font-size: 30rpx;
	padding: 0 25rpx;
	padding-right:31rpx;
	// margin-left: 30rpx;
	border-bottom: 2px #efefef solid;
	display: flex;
	justify-content: space-between;
	.plot_right{
		color: #898989;
		padding-left: 305rpx;
	}
}
.plot_left_text{
	margin-left: 10rpx;
	color: #3b87f6;
}
.Father_letter{
	margin-top: 26rpx;
	padding: 0 29rpx;
}
.letter{
	width: 100%;
	height: 138rpx;
	display: flex;
}
.letter_son{
	width: 94rpx;
	height: 94rpx;
	border-radius: 19rpx;
	margin-top: 45rpx;
	overflow: hidden;
}
.letter_sonn{
	margin-left: 29rpx;
	.sonn_top{
		margin-top: 53rpx;
		font-size: 32rpx;
	}
	.sonn_buttom{
		width: 430rpx;
		margin-top: 5rpx;
		font-size: 25rpx;
		color: #b8b8b9;
	}
}
.letter_sonnn{
	margin-top: 56rpx;
	margin-left: 40rpx;
	font-size: 23rpx;
	color: #b8b8b9;
}
image{
	width: 100%;
	height: 100%;
}
</style>
